<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>用户</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 20px">
      <el-button type="primary" @click="add()">创建</el-button>
    </div>
    <el-table
      class="image-table"
      height="400"
      :header-cell-style="{ background: '#f8f9fa' }"
      :data="tableData"
      @select="selecttable"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column type="selection" width="100" />

      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="coin" label="金币" />
      <el-table-column prop="avatar" label="头像">
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px; border-radius: 50%"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <div>
            <el-button type="success" @click="edit(scope.row)">编辑</el-button>

            <el-button type="danger" @click="shanchu(scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px; text-align: right">
      <el-pagination
        layout="total,prev, pager, next"
        v-model:currentPage="page"
        style="float: right"
        :page-size="limit"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="用户名" prop="username" required>
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          required
          v-if="title == '新增用户'"
        >
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>
        <el-form-item label="名称" prop="name" required>
          <el-input v-model="ruleForm.name" />
        </el-form-item>

        <el-form-item label="头像" prop="avatar" required>
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:7001/upload"
            :headers="{
              token: userinfo.token,
            }"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar1" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style >
.avatar1 {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<script setup>
import service from "../utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import JSZip from "jszip";
import FileSaver from "file-saver";
import { onMounted, ref } from "vue";
import axios from "axios";
const total = ref(0);
const ruleForm = ref({});
const limit = ref(10);
const page = ref(1);
const imageUrl = ref("");
const dialogVisible = ref(false);
const fileList = ref([]);
const tableData = ref([]);
const selectlist = ref([]);
const userinfo = ref({});
onMounted(() => {
  userinfo.value = JSON.parse(window.localStorage.getItem("userinfo"));
  getdata();
});
const selecttable = (e) => {
  console.log(e, "ed");
  selectlist.value = e;
};

const handleRemove = () => {};
const handleAvatarSuccess = (e) => {
  console.log(e, "e");
  imageUrl.value = e.data;
};
const handleClose = () => {
  dialogVisible.value = false;
};

const shanchu = (row) => {
  ElMessageBox.confirm("是否确认删除该用户？", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      service
        .post("/user/delete", {
          id: row.id,
        })
        .then((res) => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getdata();
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
const title = ref("");
const add = () => {
  title.value = "新增用户";
  imageUrl.value = "";
  fileList.value = [];
  ruleForm.value = {};
  dialogVisible.value = true;
};
const edit = (row) => {
  console.log(row);
  title.value = "编辑用户";
  ruleForm.value = row;
  imageUrl.value = row.avatar;
  fileList.value = [];
  if (row.note !== "") {
    fileList.value.push({
      url: row.note,
      name: row.notename,
    });
  }

  dialogVisible.value = true;
};
const submitForm = () => {
  console.log(fileList.value, "fileList");
  if (!ruleForm.value.username) {
    ElMessage({
      message: "请输入用户名",
      type: "warning",
    });
    return;
  }
  if (title.value == "新增用户") {
    if (!ruleForm.value.password) {
      ElMessage({
        message: "请输入密码",
        type: "warning",
      });
      return;
    }
  }

  if (!ruleForm.value.name) {
    ElMessage({
      message: "请输入名称",
      type: "warning",
    });
    return;
  }
  if (fileList.length == 0) {
    ElMessage({
      message: "请上传简历",
      type: "warning",
    });
    return;
  }
  if (imageUrl.value == "") {
    ElMessage({
      message: "请上传头像",
      type: "warning",
    });
    return;
  }
  let url = "";
  let obj = {};
  if (title.value == "新增用户") {
    url = "/user/add";
    obj = {
      username: ruleForm.value.username,
      password: ruleForm.value.password,
      name: ruleForm.value.name,
      avatar: imageUrl.value,
    };
  } else {
    url = "/user/edit";
    obj = {
      username: ruleForm.value.username,
     password:"123456",
      name: ruleForm.value.name,
      avatar: imageUrl.value,
      coin: ruleForm.value.coin,
      id: ruleForm.value.id,
    };
  }
  service.post(url, obj).then((res) => {
    if (res.code == 200) {
      dialogVisible.value = false;
      ElMessage({
        message: "成功",
        type: "success",
      });
      getdata();
    }
  });
};
const handleSizeChange = (f) => {
  limit.value = f;
  getdata();
};
const handleCurrentChange = (f) => {
  page.value = f;
  getdata();
};

const getdata = () => {
  service
    .post("/user/list", {
      page: page.value,
      limit: limit.value,
    })
    .then((res) => {
      console.log(res, "r");
      tableData.value = res.data.data;
      total.value = res.data.count;
    });
};
</script>